<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Career Builder</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- 头部 -->
        <div class="header">

            <!-- logo -->
            <div class="logo">
                <a href="#"><img src="./images/logo.png" alt="logo"></a>
            </div>

            <!-- 导航 -->
            <div class="nav">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">GALLERY</a></li>
                    <li><a href="#">FACULTY</a></li>
                    <li><a href="#">EVENTS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>

        </div>

        <!-- 内容 -->
        <div class="main">

            <!-- banner图 -->
            <div class="banner">
                <img src="./images/banner3.jpg" alt="banner">
            </div>

            <!-- 遮罩层 -->
            <div class="mask_layer_banner"></div>

            <!-- 登录区 -->
            <div class="register">
                <div class="content">
                    <form action="/test" method="POST">
                        <input type="text" name="user" placeholder="your Name">
                        <br>
                        <input type="tel" name="telephone" placeholder="your Phone">
                        <br>
                        <input type="email" name="email" placeholder="your Email">
                        <br>
                        <textarea name="introduce" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea>
                        <br>
                        <button type="submit">SEND MESSAGE</button>
                    </form>
                </div>
                
            </div>

            <!-- ABOUT区 -->
            <div class="about">
                
                <!-- 介绍 -->
                <h2>ABOUT</h2>
                <span class="line"></span>
                <p class="word">
                    Lorem Ipsum is simply dummy text of the printing and typesetting
                    <br>
                    industry. Lorem Ipsum has been the industry's standerd dummy
                    <br>
                    text ever since the 1500s
                </p>
                <img src="./images/bb3.jpg" class="troduce_image">

                <br>

                <!-- 图片左侧文字 -->
                <div class="word_left">

                    <!-- 上部文字 -->
                    <p class="left_top">
                        <span class="one">a word </span>
                        <br>
                        <span class="two">about us</span>
                    </p>

                    <br>

                    <!-- 下部文字 -->
                    <div class="left_bottom">
                        Praesent dignissim viverra est, sed
                        <br>
                        bibendum ligula congue non. Sed ac nisl
                        <br>
                        et feils gravida commodo? Suspendisse
                        <br>
                        eget ullamcorper ipsum. Suspendisse
                        <br>
                        diam amet.
                        <br>
                        <button>EXPLORE</button>
                    </div>
                </div>

                <!-- 图片右侧 -->
                <div class="word_right">

                    <!-- 上部 -->
                    <div class="right_top">
                        <h2>7000</h2>
                        <span class="line"></span>
                        <p>Students</p>
                    </div>

                    <!-- 下部 -->
                    <div class="right_bottom">
                        <h2>600</h2>
                        <span class="line"></span>
                        <p>Faculty</p>
                    </div>

                </div>

                <!-- 图片展览区 -->
                <div class="image_exhibition">

                    <!-- 第一块 -->
                    <div class="block">
                        <div class="ex_up">
                            <img src="./images/b1.jpg" class="image_one" height="350px" width="475px">
                        </div>

                        <div class="ex_bottom">
                            <h3>Conference Hall</h3>
                            <p class="first_section">
                                Lorem Ipsum is simply dummy text of the
                                <br>
                                printing and typesetting industry
                            </p>
                            <p class="second_section">
                                Lorem Ipsum has been the industry's standerd dummy
                                <br>
                                text ever since the 1500s, when an unkonwn printer took
                                <br>
                                a galley of type and screambled it to make a type
                                <br>
                                specimen book.
                            </p>
                            <button>EXPLORE</button>
                        </div>
                    </div>

                    <!-- 第二块 -->
                    <div class="block">

                        <div class="ex_bottom">
                            <h3>Conference Hall</h3>
                            <p class="first_section">
                                Lorem Ipsum is simply dummy text of the
                                <br>
                                printing and typesetting industry
                            </p>
                            <p class="second_section">
                                Lorem Ipsum has been the industry's standerd dummy
                                <br>
                                text ever since the 1500s, when an unkonwn printer took
                                <br>
                                a galley of type and screambled it to make a type
                                <br>
                                specimen book.
                            </p>
                            <button>EXPLORE</button>
                        </div>

                        <div class="ex_up">
                            <img src="./images/b3.jpg" class="image_one" height="350px" width="475px">
                        </div>

                    </div>

                    <!-- 第三块 -->
                    <div class="block">
                        <div class="ex_up">
                            <img src="./images/b2.jpg" class="image_one" height="350px" width="475px">
                        </div>

                        <div class="ex_bottom">
                            <h3>Conference Hall</h3>
                            <p class="first_section">
                                Lorem Ipsum is simply dummy text of the
                                <br>
                                printing and typesetting industry
                            </p>
                            <p class="second_section">
                                Lorem Ipsum has been the industry's standerd dummy
                                <br>
                                text ever since the 1500s, when an unkonwn printer took
                                <br>
                                a galley of type and screambled it to make a type
                                <br>
                                specimen book.
                            </p>
                            <button>EXPLORE</button>
                        </div>
                    </div>

                    <!-- 第四块 -->
                    <div class="block">
                        <div class="ex_bottom">
                            <h3>Conference Hall</h3>
                            <p class="first_section">
                                Lorem Ipsum is simply dummy text of the
                                <br>
                                printing and typesetting industry
                            </p>
                            <p class="second_section">
                                Lorem Ipsum has been the industry's standerd dummy
                                <br>
                                text ever since the 1500s, when an unkonwn printer took
                                <br>
                                a galley of type and screambled it to make a type
                                <br>
                                specimen book.
                            </p>
                            <button>EXPLORE</button>
                        </div>

                        <div class="ex_up">
                            <img src="./images/b4.jpg" class="image_one" height="350px" width="475px">
                        </div>
                    </div>
                </div>

            </div>

            <!-- GALLERY区 -->
            <div class="gallery">

                <!-- 介绍 -->
                <h2 class="title">GALLERY</h2>
                <span class="line"></span>
                <p class="word">
                    Lorem Ipsum is simply dummy text of the printing and typesetting
                    <br>
                    industry. Lorem Ipsum has been the industry's standerd dummy
                    <br>
                    text ever since the 1500s
                </p>

                <div class="introduce_image">
                    <div class="first_row">
                        <img src="./images/03-01.jpg">
                        <img src="./images/03-02.jpg">
                        <img src="./images/03-03.jpg">
                        <span class="label">science lab</span>
                        <span class="label">indoor stadium</span>
                        <span class="label">transportation</span>
                    </div>
                    <div class="second_row">
                        <img src="./images/03-04.jpg">
                        <img src="./images/03-05.jpg">
                        <img src="./images/03-06.jpg">
                        <span class="label">kids room</span>
                        <span class="label">meditation classes</span>
                        <span class="label">kids play ground</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- 页脚 -->
        <div class="footer">
            <p>&copy; 2016 imooc.com 京ICP备13046642号</p>
        </div>
        
        <!-- <script src="" async defer></script> -->
    </body>
</html>